<!-- 网页主要框架（最原始的版本（弃用）） -->

<!DOCTYPE html>
<html lang="en">
<head>
    <title>bootstrap-table</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />


    <!-- 引入bootstrap样式 -->
    <link href="/css/bootstrap.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="/css/bootstrap-table.css" rel="stylesheet">
    <!-- jquery -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="/js/bootstrap-table.js"></script>
    <!-- 引入中文语言包 -->
    <script src="/js/bootstrap-table-zh-CN.js"></script>

</head>
<script>

    $(function(){
        $('#teacher_table').on('click-row.bs.table', function (e, row, element) {
            $('.success').removeClass('success');//去除之前选中的行的，选中样式
            $(element).addClass('success');//添加当前选中的 success样式用于区别
        });
    });

    function getSelectedRow() {
        var index = $('#teacher_table').find('tr.success').data('index');//获得选中的行
        return $('#teacher_table').bootstrapTable('getData')[index];//返回选中行所有数据
    }

    function updateMsg() {
        var msg = getSelectedRow();
        if(msg===undefined){
            alert("请选择一条数据");
        }
        else{
            $('#myModalUpdate').modal();

            console.log(msg.id + msg.name + msg.phone);
            var name = msg.name;
            $('#id').attr("value",msg.id);
            $('#name').attr("value",msg.name);
            $('#phone').attr("value",msg.phone);
        }
    }

    function submitMsgAjax() {

        var data = {};
        data["id"] = $('#id').val();
        data["name"] = $('#name').val();
        data["phone"] = $('#phone').val();
        $.ajax({
            type: "POST",
            url:"http://localhost:8080/table/edit",//后台接口
            dataType: "json",
            contentType:"application/json",
            data:JSON.stringify(data),
            success: function(data,status,xhr){
                console.log("返回码："+data.status+" code:"+data.code+" status:"+status+" xhr:"+xhr.status)
                if(data.status === 200) {
                    initMsg();
                    alert("修改成功:"+xhr.status+" OK");
                }
            },
            error: function (d,status,xhr) {
                if(d.status === 200) {
                    alert("修改成功:"+d.status+" OK");
                    console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                    initMsg();
                }else{
                    console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                    alert("修改失败："+d.status);
                }
            },
        });
    }

    function initMsg() {
        $('#myModalUpdate').modal('hide');
        $('#myModalDelete').modal('hide');
        $('#myModalAdd').modal('hide');
        $('#teacher_table').bootstrapTable('refresh');
        $("input[type=reset]").trigger("click");
    }

    function deleteMsg() {
        var msg = getSelectedRow();
        if(msg===undefined){
            alert("请选择一条数据");
        }else{
            $('#myModalDelete').modal();
            console.log(msg.id + msg.name + msg.phone);
            var name = msg.name;
            $('#id_del').attr("value",msg.id);
            $('#name_del').attr("value",msg.name);
            $('#phone_del').attr("value",msg.phone);
        }

    }

    function deleteMsgAjax() {
        var data = {};
        data["id"] =  $('#id_del').val();

        $.ajax({
            type: "POST",
            url:"http://localhost:8080/table/delete",//后台接口
            dataType: "json",
            contentType:"application/json",
            data:JSON.stringify(data),
            success: function(data,status,xhr){
                console.log("返回码："+data.status+" code:"+data.code+" status:"+status+" xhr:"+xhr.status)
                if(data.status === 200) {
                    initMsg();
                    alert("删除成功:"+xhr.status+" OK");
                }
            },
            error: function (d,status,xhr) {
                if(d.status === 200) {
                    alert("删除成功:"+d.status+" OK");
                    console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                    initMsg();
                }else{
                    console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                    alert("删除失败："+d.status);
                }
            },
        });
    }

    function addMsg(){
        $('#myModalAdd').modal('show');
    }

    function addMsgAjax(){

        var id = $('#id_add').val();
        var name = $('#name_add').val();
        var phone = $('#phone_add').val();

        if(id === ''|| name === ''|| phone === ''){
            alert("请填完整信息！");
        }else{
            var data = {};
            data["id"] =  id;
            data["name"] =  name;
            data["phone"] =  phone;
            $.ajax({
                type: "POST",
                url:"http://localhost:8080/table/add",//后台接口
                dataType: "json",
                contentType:"application/json",
                data:JSON.stringify(data),
                success: function(data,status,xhr){
                    console.log("返回码："+data.status+" code:"+data.code+" status:"+status+" xhr:"+xhr.status)
                    if(data.returnCode === "CODE5001") {
                        alert(data.returnMsg);
                    }else if(data.returnCode === "CODE6000"){
                        alert(data.returnMsg);
                    }
                    initMsg();
                },
                error: function (d,status,xhr) {
                    if(d.status === 200) {
                        alert("添加成功:"+d.status+" OK");
                        console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                        initMsg();
                    }else{
                        console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                        alert("添加失败："+d.status);
                    }
                },
            });
        }
    }

    function queMsg(){

        var id = $('#id_que').val();
        var name = $('#name_que').val();
        var phone = $('#phone_que').val();

        //如果什么也没有填，则查询到所有数据
        if(id === ''&& name === ''&& phone === ''){
            $('#teacher_table').bootstrapTable('refreshOptions',{url:"http://localhost:8080/table/all"});
        }else {
            var data = {};
            data["id"] =  id;
            data["name"] =  name;
            data["phone"] =  phone;

            $.ajax({
                type: "POST",
                url:"http://localhost:8080/table/query",//后台接口
                dataType: "json",
                contentType:"application/json",
                data:JSON.stringify(data),
                success: function(data,status,xhr){
                    console.log(data)
                    $('#teacher_table').bootstrapTable('refreshOptions',{url:null,data:data});  //查询数据，刷新表格
                    console.log("返回码："+data.status+" code:"+data.code+" status:"+status+" xhr:"+xhr.status)
                },
                error: function (d,status,xhr) {
                    if(d.status === 200) {
                        console.log(data)
                        $('#teacher_table').bootstrapTable({data:data});
                        console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                    }else{
                        console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)
                    }
                },
            });
        }

    }

</script>

<body>
<div class="col-md-offset-3 col-md-6">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title text-center">用户信息查询</h3>
        </div>
        <form>
        <div class="panel-body">
            <div class="col-md-4">
                <div class="form-group">
                    <label>ID</label>
                    <input type="text" id="id_que" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="name_que">姓名</label>
                    <input type="text" id="name_que" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label for="phone_que">手机</label>
                    <input type="text" id="phone_que" class="form-control">
                </div>
            </div>
            <div class="form-group" style="float: right">
                <button type="button" class="btn btn-info" onclick="queMsg()">查询</button>
                <button type="reset" class="btn btn-info">重置</button>
            </div>
        </div>
        </form>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title text-center">用户信息</h3>
        </div>
        <div class="panel-body">
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-info " data-toggle="modal" onclick="addMsg();">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>增加
                </button>
                <button id="btn_edit" type="button" class="btn btn-success " data-toggle="modal" onclick="updateMsg();">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-warning" data-toggle="modal"  onclick="deleteMsg()">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="teacher_table" data-toggle="table"
                   data-method="post"
                   data-url="http://localhost:8080/table/all"
                   data-query-params="queryParams"
                   data-toolbar="#toolbar"
                   data-pagination="true"
                   data-search="false"
                   data-show-refresh="true"
                   data-show-toggle="true"
                   data-show-columns="true"
                   data-page-size="5">
                <thead>
                <tr>
                    <th data-field="id">用户ID</th>
                    <th data-field="name">名字</th>
                    <th data-field="phone">电话</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModalUpdate" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    修改信息
                </h4>
            </div>
            <div class="modal-body">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="id">用户ID</label>
                        <input type="text" id="id" class="form-control" disabled>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="name">用户姓名</label>
                        <input type="text" id="name" class="form-control">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="phone">用户号码</label>
                        <input type="text" id="phone" class="form-control">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" onclick="submitMsgAjax()">
                    提交更改
                </button>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<div class="modal fade" id="myModalDelete" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    是否确认删除该用户
                </h4>
            </div>
            <div class="modal-body">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="id">用户ID</label>
                        <input type="text" id="id_del" class="form-control" disabled>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="name">用户姓名</label>
                        <input type="text" id="name_del" class="form-control" disabled>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="phone">用户号码</label>
                        <input type="text" id="phone_del" class="form-control" disabled>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="deleteMsgAjax()">
                    确认删除
                </button>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<div class="modal fade" id="myModalAdd" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    添加用户
                </h4>
            </div>
            <form>
                <div class="modal-body">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="id">用户ID</label>
                            <input type="text" id="id_add" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="name">用户姓名</label>
                            <input type="text" id="name_add" class="form-control">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="phone">用户号码</label>
                            <input type="text" id="phone_add" class="form-control">
                        </div>
                    </div>
                </div>
                <input type="reset" name="reset" style="display: none;" />
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn btn-primary" onclick="addMsgAjax()">
                    确认添加
                </button>
            </div>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

</body>
</html>